<!--
 * @FileDescription: 会员专区-首页
 * @Author: Versient
 * @Date: 2024-11-24 14:28:20
 * @LastEditors: Versient
 * @LastEditTime: 2024-11-29 22:39:22
-->
<template>
  <view :style="{ paddingTop: safeAreaTop + 'px' }">
    <view class="container">
      <view class="title">好巧 · 愉悦 · 相遇</view>
      <view @click="checkItem(item)" class="card" v-for="item in items" :key="item.type">
        <text class="card-title">{{ item.title }}</text>
      </view>
    </view>
    <footc></footc>
    <tab-bar></tab-bar>
    <load v-if="showloading"></load>
  </view>
</template>

<script>
import load from "@/components/common/load.vue";
import footc from "@/components/common/footc.vue";
import jzz from "@/components/common/jzz.vue";

export default {
  name: "ZebraOrderingIndex",
  components: { load, footc, jzz },
  data() {
    return {
      items: [
        { type: 1, title: "新人专享优惠券", subtitle: "新店期" },
        { type: 3, title: "月度专享券", subtitle: "" },
        { type: 4, title: "充值有礼", subtitle: "" }
      ],
      safeAreaTop: 0
    };
  },

  mounted() {
    const systemInfo = wx.getSystemInfoSync();
    this.safeAreaTop = systemInfo.statusBarHeight + 80;
  },

  methods: {
    checkItem(val) {
      if(val.type == 4) {
        this.go({ t: 2, url: "/yb_wm/other/recharge/index"});
        return;
      }
      this.go({ t: 2, url: `/yb_wm/shop/reserve/content?type=${val.type}`});
    }
  }
};
</script>

<style scoped lang="scss">
page {  
  margin: 0 20px;  
  font-family: 'Arial', sans-serif; 
  background-color: #f8f9fa;
  // background: linear-gradient(135deg, #e6e9f0 0%, #eef1f7 100%);
}  

.container {
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  padding: 35px 10px 50px;
  margin: 0 auto;
  // background-color: #ffffff;
  // border-radius: 15px;   
  // box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 90%;
  box-sizing: border-box;
}  

.title {  
  font-size: 24px;  
  font-weight: bold;  
  margin-bottom: 30px;  
  // color: #AE6901;
  text-align: center;  
  // text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}  

.card {  
  width: calc(100% - 20px);  
  margin: 18px 0;  
  padding: 20px;  
  background-color: #ffffff;
  // background-color: #f8f9fa;
  border-radius: 12px;
  // box-shadow: 0 4px 10px #ae69014d;
  // transition: transform 0.3s, box-shadow 0.3s;
  // border-left: 5px solid #AE6901; 
}  
  
.card-title {  
  font-size: 18px;
  // color: #AE6901;
  text-align: center;  
  font-weight: 500;  
}  

</style>